<script setup>
import { computed, reactive, ref, toRaw, watch, nextTick } from "vue";
import {
  CloseOutlined,
  SearchOutlined,
  LeftOutlined,
  PlusOutlined,
} from "@ant-design/icons-vue";
import { useTable } from "@/hooks/useTable";
import { useTemplateRefsList } from "@vueuse/core";
import request from "@/common/utils/request";
import _ from "lodash";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  updateListKey: {
    type: Number,
    default: 0,
  },
});
const emit = defineEmits(["update:visible", "chooseProduct", "showAddProduct"]);
const onClose = () => {
  emit("update:visible", false);
};
let columns = ref([
  {
    title: "信息",
    dataIndex: "info",
    key: "info",
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
  },
]);
let searchName = ref("");
let url = "/user/socialMedia/product/list";
let { list, pagination, getList, loading, page, pageSize } = useTable(url);

const handleTableChange = (pagetion) => {
  pageSize.value = pagetion.pageSize;
  page.value = pagetion.current;
  getList();
};
watch(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      getList();
    } else {
      searchName.value = "";
    }
  }
);
const chooseProduct = (record) => {
  emit("chooseProduct", record);
};
const pressEnterChange = () => {
  getList({ title: searchName.value });
};
const showAddProduct = () => {
  emit("showAddProduct");
};
watch(
  () => props.updateListKey,
  () => {
    getList();
  }
);
</script>

<template>
  <div class="choose-product">
    <a-drawer
      title="选择产品"
      :visible="visible"
      :width="480"
      :body-style="{ paddingBottom: '60px' }"
      @close="onClose"
      destroyOnClose
    >
      <div class="operation-area">
        <a-input-search
          v-model:value="searchName"
          placeholder="请输入产品名称搜索"
          allowClear
          @search="pressEnterChange"
        />
        <a-button type="primary" class="ml-10" @click="showAddProduct">
          <PlusOutlined></PlusOutlined>
          添加产品
        </a-button>
      </div>
      <a-table
        :dataSource="list"
        :columns="columns"
        :pagination="pagination"
        @change="handleTableChange"
        :loading="loading"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'info'">
            <div class="product-wrapper" @click="chooseProduct(record)">
              <img :src="record.image[0].image" class="product-img" />
              <div class="ml-10">
                <div>{{ record.title }}</div>
                <div>
                  {{ record.category_alias || "" }}
                </div>
              </div>
            </div>
          </template>
          <template v-if="column.key === 'action'">
            <a-button @click="chooseProduct(record)" type="link"
              >选择产品</a-button
            >
          </template>
        </template>
      </a-table>
    </a-drawer>
  </div>
</template>

<style lang="less" scoped>
.product-img {
  width: 40px;
  height: 40px;
}
.product-wrapper {
  display: flex;
  current: pointer;
}
.operation-area {
  display: flex;
  margin-bottom: 20px;
}
</style>
